<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>萌宠论坛</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">-->
    <link rel="stylesheet" href="/stylesheets/article.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
    <script src="/js/jquery-1.8.3.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/bootstrap-3.1.1.min.js"></script>
</head>
<body>

<div class="container">
    <div>
        <h1><%=user%></h1>
    </div>
        <%
        if(books.length==0){
        %>

            <div>对不起，没有匹配结果</div>
        <%
        }else{
                for(var i=0;i<=books.length-1;i++){
        %>
                <div class="row">
                    <div class="col-md-12">
                        <header>
                            <div class="title" ><%=books[i].title%></div>
                            <div class="date">
                                       <%=books[i].date%>
                                <div class="div_img">
                                    <img src="/images/<%=books[i].icon%>">
                                </div>
                            </div>

                        </header>
                        <article>
                            <%=books[i].content%>
                        </article>
                    </div>
                </div>
                <a href="article/<%=books[i].artno%>">阅读详情</a>

        <%
                }
            }
        %>
</div>
<script>
    var page=1;
    var flag=true;
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if(scrollTop + windowHeight == scrollHeight){
            $.ajax({
                type:'post',
                url:'/article',
                data:{page:page++},
                dataType:'json',
                success:function (data) {
                    if(data.res.length==0){
                        alert('没有更多内容了')
                    }else{
                        console.log(JSON.stringify(data.res));
                        var img=data.res[0].icon;
                        var title= data.res[0].title;
                        var date=data.res[0].date;
                        var content=data.res[0].content;
                        var artno=data.res[0].artno;
                        $('.container').append(

                                '<div class="row">'+
                                '<div class="col-md-12">'+
                                '<header>'+
                                '<div class="title">' +
                                title+
                                '</div>'+
                                '<div class="date">'+
                                date+
                                '<div class="div_img">'+
                                '<img src="/images/' + img + '">'+
                                '</div>'+
                                '</div>'+

                                '</header>'+
                                '<article>'+
                                content+
                                '</article>'+
                                '</div>'+

                                '</div>'+
                                '<a href="article/artno">阅读详情</a>'
                        );

                    }

                },
                error:function (error) {
                    alert(error.message)

                }

            });

        }
    });
</script>
</body>
</html>








